<template>
    <div id='main'>
        <ul data-attr='' id='oul' >
            <Rmainli v-for='i in article' :key='i.id' :data='i'></Rmainli>
        </ul>
        <div class='loadmore'> <span @click='loadmore' ><i class="fa fa-spinner fa-spin" v-if='load'></i>{{status}}</span></div>
    </div>
</template>
<script>
import Rmainli from '@/components/rightmain-li'
// import Prism from 'prismjs'
import {highlightAll} from '@/unit/prism'
export default {
  name: 'Main',
  async mounted () {
    highlightAll()
    this.$store.dispatch('queryArticleList', 0)
  },
  beforeUpdate () {
    this.ch()
  },
  methods: {
    ch () {
      if (!this.$store.state.article[0]) return false
      let oul = document.getElementById('oul')
      function FormatDate (input) {
        let ms = Date.parse(input)
        let y = new Date(ms).getFullYear()
        return y
      }
      let d = FormatDate(this.$store.state.article[0].date)
      oul.setAttribute('data-attr', d)
    },
    loadmore () {
      this.$store.dispatch('queryArticleList')
    }
  },
  updated () {
    highlightAll()
  },
  computed: {
    article () {
      // if (this.$store.state.err === 1) {
      //   return '服务器出错了'
      // }
      return this.$store.state.article
    },
    status () {
      return this.$store.state.status
    },
    load () {
      return this.$store.state.loading
    }
  },
  components: {
    Rmainli
  }
}
</script>
<style lang="less" scoped>
#main {
    position: absolute;
    right: 0;
    min-height: 100%;
    background: #eaeaea;
    left: 25rem;
    width: auto;
    padding: 2.5rem 2rem;
}
#main ul {
    position: relative;
}
@media screen and (max-width: 800px) {
    #main {
        position: static;
        min-height: 100%;
        background: #eaeaea;
        padding: 2rem 0;
    }
}
</style>
